<template>
  <div id="dataBoard" @drop='drop($event)' @dragover='allowDrop($event)'>
    <p class="kanban-title font16 bg-color-white">数据看板</p>
    <div class="kanban_container">
      <el-card class="kanban-index">
        <div slot="header" class="clearfix">
          <el-form :inline="true">
            <el-form-item>
              <el-dropdown placement="bottom-start" size="mini" @command="switchBoard" trigger="click">
                <span class="el-dropdown-link eldropdownlink">
                  {{ kanban_name }}<i class="el-icon-arrow-down el-icon--right iconarrow"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="el-popper-kanban-list">
                  <el-dropdown-item v-if="kanban_list.length === 0" :command="{}">暂无数据</el-dropdown-item>
                  <el-dropdown-item v-for="kanban in kanban_list" :key="kanban.kanban_id" :command="kanban">
                    {{ kanban.kanban_name }}
                    <i v-if="kanban_list.length > 1" class="iconfont icon-close rf" @click.stop="removeKanban(kanban)"></i>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
          </el-form>
          <el-button size="mini" type="text" icon="el-icon-plus" @click="dialogVisible = true">新增看板</el-button>
          <div class="indicators-and-graph-btns rf">
            <el-button size="mini" class="add-btn rf" @click.stop="addIndicatorsAndGraph('grah')">新增图形</el-button>
            <el-button size="mini" class="add-btn rf" @click.stop="addIndicatorsAndGraph('target')">新增指标</el-button>
          </div>
        </div>
        <!--新增看板弹框-->
        <el-dialog
          title="新增看板"
          :visible.sync="dialogVisible"
          width="422px"
          @close="endAddKanban('kanbanForm')">
          <el-form :model="kanbanForm" :rules="kanbanRules" ref="kanbanForm"  label-width="100px">
            <el-form-item label="看板名称" prop="name">
              <el-input v-model="kanbanForm.name" size="mini" placeholder="请输入看板名称" class="dialog-input"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="endAddKanban('kanbanForm')" class="dialog-btn">取 消</el-button>
              <el-button type="primary" @click="addKanban('kanbanForm')" class="dialog-btn">保 存</el-button>
            </span>
        </el-dialog>
        <!--时间-->
        <div class="date">
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            align="left"
            unlink-panels
            size="mini"
            range-separator="至"
            start-placeholder=" 开始日期 "
            end-placeholder=" 结束日期 "
            @change="dateflush"
            :picker-options="disableDate">
          </el-date-picker>
          <div class="rf">
            <p class="time rf">查询时间&nbsp;:&nbsp;{{ dateTime }}</p>
          </div>
        </div>
        <!--指标列表-->
        <el-row :gutter="20" class="container-fluid">
          <el-col :span="6" v-for="(item, index) in indicatorsList" :key="item.kanban_elem_id">
            <el-card shadow="hover" :class="{ active: currentIndex === index }">
              <div class="indicators-container" @mouseover="iconShow(index)" @mouseout="iconHide(index)" @click="queryCurrentIndicatorDetails(index, item)" v-loading="item.loading">
                <i class="iconfont icon-close rf" v-if="show_list[index]" @click.stop="removeIndicators(item)"></i>
                <p class="font12 db-title">{{ item.kanban_elem_name }}</p>
                <p class="db-num1">
                  <countTo :startVal="0" :endVal="'now_count' in item ? item.now_count : 0" :duration='3000'></countTo>
                </p>
                <p class="font12 db-num2">本月累计: {{ item.month_count }}</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover">
              <div class="div-add" @click="addtarget">
                <i class="iconfont icon-add"></i>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <!--新增指标弹窗-->
      <el-dialog
        title="新建指标"
        :visible.sync="indicatorsDialog"
        width="422px"
        class="indicators-dialog"
        @close="indicatorsClose('indicatorsForm')">
        <el-form :model="indicatorsForm" ref="indicatorsForm" :rules="indicatorsRules">
          <el-row>
            <el-col :span="11">
              <el-form-item prop="value1">
                <el-select size="mini" v-model="indicatorsForm.value1" placeholder="请选择" popper-class="zIndex-popper">
                  <el-option
                    v-for="elmitem in elm_onelist"
                    :key="elmitem.meta_id"
                    :label="elmitem.colume_chs"
                    :value="elmitem.meta_id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <span class="text">的</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="value2">
                <el-select size="mini" class="width100" v-model="indicatorsForm.value2" placeholder="请选择" popper-class="zIndex-popper">
                  <el-option
                    v-for="elmitem in elm_twolist"
                    :key="elmitem.meta_id"
                    :label="elmitem.tgt_name"
                    :value="elmitem.meta_id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="indicatorsClose('indicatorsForm')" class="dialog-btn">取 消</el-button>
          <el-button type="primary" @click="indicatorsAdd('indicatorsForm')" class="dialog-btn">保 存</el-button>
        </span>
      </el-dialog>
      <!--echarts 线图-->
      <el-card class="line-chart">
        <p class="chart-title" slot="header">{{ echarts_name }}</p>
        <chart v-if="this.option.legend.data.length > 0 && indicatorsList.length > 0" :options="option"></chart>
        <VNoData v-else></VNoData>
      </el-card>
      <!--数据报表列表-->
      <el-card class="data-report-list">
        <el-row :gutter="10">
          <template v-if="graph_list.length > 0">
            <el-col :span="12" v-for="(item, index) in graph_list" :key="item.kanban_elem_id">
            <el-card shadow="hover">
              <p slot="header" class="activity-toolbar">
                <span class="rf remove-graph">
                  <i class="iconfont icon-close" @click="removeGraph(index)"></i>
                </span>
              </p>
              <div class="activity-chart">
                <line-echarts :kanbanId="item.kanban_elem_id"></line-echarts>
              </div>
            </el-card>
          </el-col>
          </template>
          <el-col :span="12" class="add-graph">
            <el-card shadow="hover">
              <div @click="addDataReport">
                <i class="iconfont icon-add"></i>
                <span>添加数据报表</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <!--添加数据报表弹窗-->
      <el-dialog
        title="添加报表到看板"
        :visible.sync="graphGialog"
        width="422px"
        class="graph-dialog"
        @close="handleClose1('graphForm')">
        <el-form :rules="graphRules" ref="graphForm" :model="graphForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="选择报表" prop="code_value">
                <el-select size="mini" placeholder="请选择" v-model="graphForm.code_value" @change="analbaar" popper-class="zIndex-popper">
                  <el-option
                    v-for="comdata in commonData"
                    :key="comdata.code_value"
                    :label="comdata.code_value_nm_cns"
                    :value="comdata.code_value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="选择类型" prop="anal_id">
                <el-select size="mini" placeholder="请选择" v-model="graphForm.anal_id" popper-class="zIndex-popper">
                  <el-option
                    v-for="anal in anals"
                    :key="anal.anal_id"
                    :label="anal.anal_name"
                    :value="anal.anal_id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click.stop.native="graphAadd('graphForm')" class="addtabbtn">添加到当前看板</el-button>
        </span>
      </el-dialog>
    </div>
    <!--拖拉框-->
    <div :style="dragstyle" class="draglist" id="box" ref="box"  v-clickoutside="dragclose">
      <div class="title">
        <el-button type="primary" size="mini" icon="el-icon-close" circle
                   @click="dragclose"></el-button>
        <span>{{dragtitle}}</span>
      </div>
      <ul>
        <li draggable='true' @dragstart='dragg($event)'
            v-for="dragli in draglists" :key="dragli.id">{{dragli.kanban_elem_name}}
        </li>
        <li draggable='false' v-if="draglists.length === 0" class="dragnodata">暂无数据</li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  import Msg from '../../../../assets/js/msg'
  import { getDateTime } from '../../../../assets/js/index'
  import countTo from 'vue-count-to'
  import lineEcharts from './comm/lineEcharts'
  // import { Loading } from 'element-ui'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import VNoData from '../../../../components/VNoData/VNoData'
  import { mapState } from 'vuex'
  // 查询看板列表
  const getKanbanList = (vm) => {
    ajax.post(api.SELECTBAKANBANLIST).then(res => {
      if (res.data.length > 0) {
        vm.kanban_list = res.data
        vm.kanban_id = vm.kanban_list[0].kanban_id
        vm.kanban_name = vm.kanban_list[0].kanban_name
      }
    })
  }

  // 查询指标列表
  const getIndicatorList = (vm) => {
    ajax.post(api.SELECTKANBANELEMLIST, { kanban_id: vm.kanban_id }).then(res => {
      vm.indicatorsList = res.data
      if (vm.indicatorsList.length > 0) {
        vm.indicatorsList.forEach((item, index) => {
          // let loadingInstance = Loading.service({ text: '拼命加载中...', target: '.loading' + index })
          item.loading = true
          vm.show_list.push(false)
          const params = {
            from_date: vm.fromDate,
            to_date: vm.toDate,
            kanban_elem_id: item.kanban_elem_id
          }
          ajax.post(api.SELECTANALYSETGT, params).then(res => {
            // loadingInstance.close()
            item.loading = false
            vm.$set(item, 'month_count', res.data.month_count)
            vm.$set(item, 'now_count', Number(res.data.now_count))
            item.tgt_list = res.data.tgt_list
            item.set_list = res.data.set_list
            vm.indicatorsList.splice(index, 1, item)
            if (index === 0) {
              echartsdataProcessing(vm, item)
            }
          }, (req) => {
            // loadingInstance.close()
            item.loading = false
          })
        })
      }
    })
  }

  // echarts图指标数据处理
  const echartsdataProcessing = (vm, obj) => {
    vm.echarts_name = obj.kanban_elem_name
    vm.option.xAxis.data = []
    vm.option.series = []
    vm.option.legend.data = []
    if (obj.tgt_list && obj.tgt_list.length > 0) {
      obj.tgt_list.forEach(item => {
        let val = ''
        for (let k in item) {
          if (k.indexOf('__GSD__') !== -1) {
            val = item[k]
            break
          }
        }
        for (let k in item) {
          if (k.indexOf('__GS__') !== -1) {
            if (obj.set_list[0] === item[k]) {
              vm.option.xAxis.data.push(val)
              break
            }
          }
        }
      })
    }
    if (obj.set_list && obj.set_list.length > 0) {
      obj.set_list.forEach(item => {
        let o = {
          name: '',
          type: 'line',
          data: []
        }
        o.name = item
        obj.tgt_list.forEach(obj => {
          let val = ''
          for (let k in obj) {
            if (k.indexOf('__GF__') !== -1) {
              val = obj[k]
              break
            }
          }
          for (let k in obj) {
            if (k.indexOf('__GS__') !== -1) {
              if (item === obj[k]) {
                o.data.push(val)
                vm.option.legend.data.push(item)
                break
              }
            }
          }
        })
        vm.option.series.push(o)
      })
    }
  }

  // 点击页面空白处隐藏拖拉框
  const clickoutside = {
    // 初始化指令
    bind (el, binding, vnode) {
      function documentHandler (e) {
        // 这里判断点击的元素是否是本身，是本身，则返回
        if (el.contains(e.target)) {
          return false
        }
        // 判断指令中是否绑定了函数
        if (binding.expression) {
          // 如果绑定了函数 则调用那个函数，此处binding.value就是dragclose方法
          binding.value(e)
        }
      }
      // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
      el.__vueClickOutside__ = documentHandler
      document.addEventListener('click', documentHandler)
    },
    update () {},
    unbind (el, binding) {
      // 解除事件监听
      document.removeEventListener('click', el.__vueClickOutside__)
      delete el.__vueClickOutside__
    }
  }

  // 查询图形报表列表
  const queryGraphReportList = (vm) => {
    ajax.post(api.SELECTKANBANGRAPHLIST, { kanban_id: vm.kanban_id }).then((res) => {
      vm.graph_list = res.data
    })
  }

  export default {
    name: 'data-warehouse',
    data () {
      return {
        commonData: [],
        kanban_list: [], // 看板列表
        kanban_id: '', // 看板id
        kanban_name: '', // 看板名称
        dialogVisible: false, // 控制新增看板弹框显示隐藏
        kanbanForm: { // 新增看板表单
          name: ''
        },
        kanbanRules: {
          name: [
            {required: true, message: '不能为空', trigger: 'change'},
            {min: 1, max: 10, message: '最多输入10个字符', trigger: 'blur'}
          ]
        },
        indicatorsList: [],
        currentIndex: 0,
        show_list: [],
        dragtitle: '',
        draglists: [],
        dragstyle: {
          width: '400px',
          height: '',
          right: '-430px',
          top: 0
        },
        dateValue: [],
        dateTime: '', // 日期
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        },
        rules: {
          value1: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          value2: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        },
        option: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [],
            type: 'scroll'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            }
          ]
        },
        indicatorsDialog: false,
        echarts_name: '',
        indicatorsForm: {
          value1: '',
          value2: ''
        },
        indicatorsRules: {
          value1: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          value2: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        },
        elm_onelist: [],
        elm_twolist: [],
        graphGialog: false,
        graphForm: {
          code_value: '',
          anal_id: ''
        },
        graphRules: {
          code_value: [
            {required: true, message: '不能为空', trigger: 'change'}
          ],
          anal_id: [
            {required: true, message: '不能为空', trigger: 'change'}
          ]
        },
        anals: [],
        graph_list: []
      }
    },
    directives: { clickoutside },
    components: {
      countTo,
      lineEcharts,
      VNoData
    },
    computed: {
      ...mapState([
           'appType'
       ])
    },
    watch: {
      kanban_id (val) {
        getIndicatorList(this)
        queryGraphReportList(this)
      },
      appType (val) {
        getKanbanList(this)
      }
    },
    methods: {
      // 拖动开始
      dragg (event) {
        for (let i = 0; i < this.draglists.length; i++) {
          if (this.draglists[i].kanban_elem_name === event.target.innerText) {
            event.dataTransfer.setData('Text', JSON.stringify(this.draglists[i]))
          }
        }
      },
      // 拖动过程
      allowDrop (event) {
        event.preventDefault()
      },
      // 拖动结束
      drop (event) {
        event.preventDefault()
        let dragdata = JSON.parse(event.dataTransfer.getData('Text'))
        // 判断类型为tgt走新增指标接口
        if (dragdata.kanban_type === 'tgt') {
          const PARAMS = {
            message_content: dragdata.message_content,
            kanban_id: this.kanban_id,
            kanban_elem_name: dragdata.kanban_elem_name,
            kanban_elem_id: dragdata.kanban_elem_id
          }
          ajax.post(api.INSERTKANBANELEMLIST, PARAMS).then((res) => {
            getIndicatorList(this)
            this.querytargetdraglist()
          })
        } else if (dragdata.kanban_type === 'anal') { // 判断anal走新增看板元素定义接口
          const SELECTELEMData = {
            kanban_id: this.kanban_id,
            message_content: dragdata.message_content,
            kanban_elem_name: dragdata.kanban_elem_name
          }
          ajax.post(api.INSERTKANBANGRAPHLIST, SELECTELEMData).then((res) => {
            this.querygrahdraglist()
            // 查询图形报表
            ajax.post(api.SELECTKANBANGRAPHLIST, {kanban_id: this.kanban_id}).then((res) => {
              this.graph_list = res.data
            })
          })
        }
      },
      // 隐藏显示删除图标
      iconShow (n) {
        this.show_list.splice(n, 1, true)
      },
      // 隐藏隐藏删除图标
      iconHide (n) {
        this.show_list.splice(n, 1, false)
      },
      // 删除指标元素
      removeIndicators (item) {
        this.echarts_name = ''
        var i = this.indicatorsList.indexOf(item)
        const DeleteData = {
          kanban_elem_id: item.kanban_elem_id,
          is_invalid: 'no'
        }
        this.indicatorsList.splice(i, 1)
        ajax.post(api.DELETEKANBANELEMLIST, DeleteData).then((res) => {
          this.querytargetdraglist()
          getIndicatorList(this)
        })
      },
      // 选择我的看板
      switchBoard (obj) {
        if (obj) {
          this.kanban_id = obj.kanban_id
          this.kanban_name = obj.kanban_name
        } else {
        }
      },
      // 删除我的看板
      removeKanban (obj) {
        var i = this.kanban_list.indexOf(obj)
        this.kanban_list.splice(i, 1)
        const PARAMS = {
          kanban_id: obj.kanban_id,
          is_invalid: 'no'
        }
        ajax.post(api.DELETEBAKANBAN, PARAMS).then((res) => {
          // 删除后查询看板
          getKanbanList(this)
        })
      },
      // 新增看板
      addKanban (kanbanForm) {
        this.$refs[kanbanForm].validate((valid) => {
          if (valid) {
            const PARAMS = {
              kanban_name: this.kanbanForm.name,
              is_top: '1'
            }
            ajax.post(api.INSERTBAKANBAN, PARAMS).then((res) => {
              // 保存成功后给的提示 恢复新增默认转态
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.dialogVisible = false
              this.kanban_list = res.data
              this.kanbanForm.name = ''
              this.$refs[kanbanForm].resetFields()
              // 新增后查询看板
              getKanbanList(this)
            })
          } else {
            return false
          }
        })
      },
      // 取消新增看板
      endAddKanban (kanbanForm) {
        this.dialogVisible = false
        this.$refs[kanbanForm].resetFields()
      },
      // 点击新增指标/报表打开拖拉框
      addIndicatorsAndGraph (val) {
        if (this.kanban_list.length === 0) {
          Msg.alert('请新增看板')
          return
        }
        this.dragstyle.right = 0 + 'px'
        // 判断如果点击新增指标
        if (val === 'target') {
          this.querytargetdraglist()
          this.dragtitle = '新增指标'
        } else if (val === 'grah') { // 判断点击新增报表
          this.querygrahdraglist()
          this.dragtitle = '新增图形'
        }
      },
      // 关闭可拖拉框
      dragclose () {
        this.dragstyle.right = -430 + 'px'
        this.draglists = []
      },
      // 查询指标可拖拉列表
      querytargetdraglist () {
        ajax.post(api.SELECT_BAKANBAN_ELEMDEF_LIST, {kanban_type: 'tgt'}).then((res) => {
          this.draglists = res.data
        })
      },
      // 关闭新建指标弹窗
      indicatorsClose (indicatorsForm) {
        this.indicatorsDialog = false
        this.$refs[indicatorsForm].resetFields()
      },
      // 新增指标看板
      indicatorsAdd (indicatorsForm) {
        this.$refs[indicatorsForm].validate((valid) => {
          if (valid) {
            const SELECTELEMData = {
              message_content: `${this.indicatorsForm.value1}__${this.indicatorsForm.value2}`,
              kanban_id: this.kanban_id
            }
            ajax.post(api.INSERTKANBANELEMLIST, SELECTELEMData).then((res) => {
              this.$refs[indicatorsForm].clearValidate()
              this.indicatorsList.push({
                item: null
              })
              // // 新增指标看板后查询更新
              // ajax.post(SELECTKANBANELEMLIST, {kanban_id: this.kanban_id}).then((res) => {
              //   this.indicatorsList = res.data
              // })
              // getKanbanList(this)
              getIndicatorList(this)
            })
            this.indicatorsDialog = false
            this.$refs[indicatorsForm].clearValidate()
          } else {
            return false
          }
        })
      },
      // 查询图形拖拉列表
      querygrahdraglist () {
        ajax.post(api.SELECT_BAKANBAN_ELEMDEF_LIST, {kanban_type: 'anal'}).then((res) => {
          this.draglists = res.data
        })
      },
      // 日期变更
      dateflush (list) {
        this.time = getDateTime(new Date(), 'ss')
        let arr = []
        if (list) {
          list.forEach((item, index) => {
            arr[index] = getDateTime(item, 's')
          })
        }
        this.fromDate = arr[0]
        this.toDate = arr[1]
        getIndicatorList(this)
      },
      // 点击单个指标获取指标数据
      queryCurrentIndicatorDetails (n, obj) {
        this.currentIndex = n
        echartsdataProcessing(this, obj)
      },
      // 点击添加指标
      addtarget () {
        if (this.kanban_list.length === 0) {
          Msg.alert('请新增看板')
          return
        }
        this.indicatorsDialog = true
      },
      // 显示新增数据报表弹框
      addDataReport () {
        if (this.kanban_list.length === 0) {
          Msg.alert('请新增看板')
          return
        }
        this.graphGialog = true
      },
      // 新增图形报表
      graphAadd (graphForm) {
        this.$refs[graphForm].validate((valid) => {
          if (valid) {
            const KANBANGRAPHLIST = {
              kanban_id: this.kanban_id,
              message_content: `${this.graphForm.code_value}__${this.graphForm.anal_id}`
            }
            ajax.post(api.INSERTKANBANGRAPHLIST, KANBANGRAPHLIST).then((res) => {
              this.graphGialog = false
              this.$refs[graphForm].resetFields()
              this.graph_list = []
              // 查询图形报表
              ajax.post(api.SELECTKANBANGRAPHLIST, {kanban_id: this.kanban_id}).then((res) => {
                this.graph_list = res.data
              })
            })
          } else {
            return false
          }
        })
      },
      // 新增报表弹窗关闭
      handleClose1 (graphForm) {
        this.graphGialog = false
        this.$refs[graphForm].resetFields()
      },
      //  选择类型
      analbaar (val) {
        this.anals = []
        // 查询常用
        ajax.post(api.SELECTBAARCHANALLIST, {anal_type: val}).then((res) => {
          this.anal_id = ''
          for (let i = 0; i < res.data.length; i++) {
            let obj = {}
            obj.anal_id = res.data[i].anal_id
            obj.anal_name = res.data[i].anal_name
            this.anals.push(obj)
          }
        })
      },
      //  删除图形报表
      removeGraph (ind) {
        const DELETEGRAPHData = {
          kanban_elem_id: this.graph_list[ind].kanban_elem_id,
          is_invalid: 'no'
        }
        ajax.post(api.DELETEKANBANGRAPHLIST, DELETEGRAPHData).then((res) => {
          ajax.post(api.SELECTKANBANGRAPHLIST, {kanban_id: this.kanban_id}).then((res) => {
            this.graph_list = res.data
            this.querygrahdraglist()
            Msg.alert('删除成功')
          })
        })
      }
    },
    created () {
      if ('commonData' in sessionStorage) {
        // this.commonData = JSON.parse(sessionStorage.getItem('commonData')).B010008
        let item1 = JSON.parse(sessionStorage.getItem('commonData')).B010008[0]
        // let item2 = JSON.parse(sessionStorage.getItem('commonData')).B010008[1]
        this.commonData = [item1]
        this.elm_onelist = JSON.parse(sessionStorage.getItem('commonData')).META_COLUME
        this.elm_twolist = JSON.parse(sessionStorage.getItem('commonData')).META_TGT
      }
      this.dragstyle.height = document.documentElement.clientHeight + 'px'
      this.dateValue[0] = new Date()
      this.dateValue[1] = new Date()
      this.fromDate = getDateTime(this.dateValue[0], 's')
      this.toDate = getDateTime(this.dateValue[1], 's')
      this.dateTime = getDateTime(new Date(), 'ss')
      getKanbanList(this)
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  #dataBoard
    height 100%
    .kanban-title
      line-height 50px
      padding 0 20px
      border-bottom 1px solid #d8dce5
      position relative
      z-index 99
    .kanban_container
      height calc(100% - 51px)
      padding 10px
      overflow auto
      .kanban-index
        padding 10px
        .el-card__header
          background #016DFB
          padding 10px
          .clearfix
            overflow hidden
            line-height 30px
            .el-form
              display inline-block
              .el-form-item
                margin-bottom 0
                .el-form-item__label
                  color #fff
                  line-height 30px
                .el-form-item__content
                  line-height 30px
                  cursor pointer
                  border-bottom 1px solid #fff
                  .el-dropdown
                    color #fff
                  .eldropdownlink
                    display inline-block
                    width 180px
                    .iconarrow
                      float right
                      padding-top 10px
            .el-button--text
              color #fff
              margin-left 25px
              font-size 14px
            .indicators-and-graph-btns
              .el-button
                color #016DFB
                font-size 14px
                margin-left 15px
        .el-card__body
          padding 0
        .el-dialog__body
          padding 30px
          .dialog-input
            width 250px
        .date
          line-height 32px
          padding 20px 0
        .container-fluid
          .el-col-6
            margin 10px 0
            text-align center
            cursor pointer
            height 120px
            .el-card__body
              height 120px
              padding 10px 0
              position relative
              .icon-close
                position absolute
                right 6px
                top 2px
                color #c0c4cc
              .db-title, .db-num2
                color #92959a
                height 30px
                line-height 30px
              .db-num1
                height 40px
                line-height 40px
                font-size 24px
                font-weight bold
                color #6f7379
          .div-add
            height 100px
            line-height 100px
            .icon-add
              font-size 30px
              color #c0c4cc
          .active
            box-shadow 0 0 8px rgba(1, 109, 251, 0.6)
      .indicators-dialog
        .el-dialog__body
          padding 30px
          .el-col-2
            position relative
            top 10px
      .line-chart
        margin-top 10px
        .chart-title
          text-align center
        .el-card__body
          .echarts
            width 100%
            div
              canvas
                width 100% !important
      .data-report-list
        margin-top 10px
        .el-card__body
          padding 10px
          .el-col
            margin-bottom 10px
            height 507px
            .el-card
              height 100%
              .el-card__header
                height 0
                position relative
                .remove-graph
                  position absolute
                  top 7px
                  right 10px
                  .icon-close
                    color #c0c4cc
              .el-card__body
                height calc(100% - 37px)
          .add-graph
            cursor pointer
            .el-card__body
              height 100%
              & > div
                height 100%
                line-height 507px
                text-align center
                .iconfont, span
                  font-size 30px
                  color #016DFB
      .graph-dialog
        .el-dialog__body
          padding 35px
    input::-webkit-input-placeholder
      color #D8DBE2
    input::-moz-placeholder /* Mozilla Firefox 19+ */
      color #D8DBE2
    input:-moz-placeholder /* Mozilla Firefox 4 to 18 */
      color #D8DBE2
    input:-ms-input-placeholder /* Internet Explorer 10-11 */
      color #d8dbe2
    .draglist
      position fixed
      background-color white
      border 1px solid #f4f4f4
      box-shadow 0 0 10px 0 #aaa
      transition right 500ms
      z-index 2000
      .title
        height 50px
        line-height 50px
        padding 0 10px
        text-align center
        border-bottom 1px solid #d8dce5
        font-size 20px
        color #606266
        box-shadow 0 2px 3px #d8dce5
        .el-button
          position absolute
          left 10px
          top 11px
      ul
        height 50px
        line-height 50px
        text-align left
        margin 0 10px
        span
          margin-left 100px
          font-size 16px
        li
          border-bottom 1px solid #f4f4f4
          padding-left 15px
        li:hover
          background-color #ecf5ff
          color #66b1ff
          cursor pointer
        .dragnodata
          text-align center
          font-size 24px
          color #b4bccc
          border-bottom none
          margin-top 50px
  .el-popper-kanban-list
    min-width 0px !important
    padding 10px 0 !important
    width 185px
    .el-dropdown-menu__item
      .icon-close
        padding-left 10px
</style>
